<template>
  <div class="rainDay">
    <div class="search">
      <h4>积水月统计</h4>
      <el-form class="form" size="small" :inline="true" :model="search">
        <el-form-item label="日期选择">
          <el-date-picker
            v-model="search.time"
            type="month"
            placeholder="选择日期"
            value-format="yyyy-MM-hh"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="backgroundColor:#4E72C8;color:#fff" @click="getAddBook('searchForm')">查询</el-button>
          <el-button style="backgroundColor:#EAEAEA;color:#000" @click="empty('searchForm')">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="chart_list">
      <el-col :span="5" class="colleft">
        <div class="listbox">
          <ul class="listul">
            <li
              :class="selectId==v.id?'cur':''"
              v-for="v in pointListData"
              @click="getOne(v.stationName,v.id)"
              :key="v.id"
            >{{v.stationName}}</li>
          </ul>
        </div>
      </el-col>
      <el-col :span="19" class="colright">
        <div class="chartbox">
          <month-chart v-if="flag" :chart-data="monthPointChart"/>
           <div v-if="!flag" style="width:100%;height:490px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getTime } from "../../../utils/myMethod";
import MonthChart from "./MonthChart";
export default {
  name: "MounthPoint",
  components: {
    MonthChart
  },
  data() {
    return {
      flag:false,
      dataX: [
            "1日",
            "2日",
            "3日",
            "4日",
            "5日",
            "6日",
            "7日",
            "8日",
            "9日",
            "10日",
            "11日",
            "12日",
            "13日",
            "14日",
            "15日",
            "16日",
            "17日",
            "18日",
            "19日",
            "20日",
            "21日",
            "22日",
            "23日",
            "24日",
            "25日",
            "26日",
            "27日",
            "28日",
            "29日",
            "30日",
            "31日"
          ],
      selectId: 1, //积水点当前id
      pointName: "锦霞南区",
      monthPointChart: {}, //积水点月积水
      pointListData:[],
      search: {
        time: getTime(new Date())
      }
    };
  },
  created() {
    this.getPointList();
    this.getMonthDay();
  },
  computed: {},

  methods: {
    getMonthDay() {
      let _this = this;
      let time = _this.search.time;
      _this.$http
        .get("dataPonding/findByPondName", {
          params: {
            time: _this.search.time,
            dateType: "day",
            name: this.pointName
          }
        })
        .then(res => {
          console.log(res, "month");
          let pointNameArr = [];
          let pondingDepthArr = [];
          let resData = res.data;
          let resLength = res.data.length;
          for (var i = 0; i < resLength; i++) {
            pointNameArr.push(resData[i].dateInt);
            pondingDepthArr.push(resData[i].pondingDepth);
          }
          this.monthPointChart.dataX = pointNameArr;
          this.monthPointChart.dataY = pondingDepthArr;
          if (resLength > 0) {
            this.flag = true;
          }
        });
    },
    getList() {
      let _this = this;
      let time = _this.search.time;
      return new Promise(function(resolve, reject) {
        _this.$http
          .post("dataMsg/getDayDetailAll", {
            time: _this.search.time,
            dateType: "mounth",
            companyId: localStorage.getItem("companyId")
          })
          .then(res => {
            // if (res.data.length == 0) {
            //   _this.$message({
            //     message: "该时间设备暂无数据,请选择其他时间查询",
            //     type: "warning",
            //     center: true
            //   });
            //   // return;
            // }
            // ;
            let dataX = [];
            let dataYmaxLevel = [];
            let dataYminLevel = [];
            let dataYavgLevel = [];
            console.log("kkk", res);
            let arr = res.data;

            // arr.forEach(element => {
            //   dataX.push(
            //     element.stationName +
            //       "\n(当前水位" +
            //       parseFloat(element.waterLevel).toFixed(2) +
            //       "CM)"
            //   );
            //   dataYmaxLevel.push(element.maxLevel.toFixed(2));
            //   dataYminLevel.push(element.minLevel.toFixed(2));
            //   dataYavgLevel.push(element.avgLevel.toFixed(2));
            // });

            _this.dataX = dataX;
            _this.dataYmaxLevel = dataYmaxLevel;
            _this.dataYminLevel = dataYminLevel;
            _this.dataYavgLevel = dataYavgLevel;
            resolve({ dataX, dataYmaxLevel, dataYminLevel, dataYavgLevel });
          });
      });
    },
    getPointList() {
      this.$http
        .post("device/indexFindAll", {
          companyId: localStorage.getItem("companyId"),
          type: 4
        })
        .then(res => {
          this.pointListData = res.data;
          // console.log(this.pointListData);
        });
      // 默认显示第一条
      this.$http
        .get("device/findDeviceInfo", { params: { name: this.pointName } })
        .then(res => {
          if (res.data.length == 0) {
            return;
          }
          this.pointdetailInfo = res.data[0];
          console.log(this.pointdetailInfo, "22222222222");
        });
    },
    getOne(stationName, id) {
      this.selectId = id;
      this.pointName = name;
       this.flag=false
      this.getMonthDay();
    },
  
    getAddBook() {
 console.log(this.search.time)
 this.flag=false
      this.getMonthDay();  
    },
    empty() {
      this.search = {
        time: getTime(new Date())
      };
       this.flag=false
       this.getMonthDay(); 
    },
    //根据年月得到天数
    getDays(year, month) {
      var getDayNumByYearMonth = function(year, month) {
        switch (month) {
          case "01":
          case "1":
          case "03":
          case "3":
          case "05":
          case "5":
          case "07":
          case "7":
          case "08":
          case "8":
          case "10":
          case "12":
            return 31;
            break;
          case "04":
          case "06":
          case "09":
          case "4":
          case "6":
          case "9":
          case "11":
            return 30;
            break;
          case "02":
          case "2":
            (year / 4 == 0 && year / 100 != 0) || year / 400 == 0 ? 29 : 28;
        }
      };
      //是否是闰年
      return getDayNumByYearMonth(year, month);
    }
    // isLeapYear(year) {
    //   if (year / 4 == 0 && year / 100 != 0) {
    //     return true;
    //   } else if (year / 400 == 0) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // }
  }
};
</script>
<style lang="less" scoped>
.rainDay {
  .charts {
    width: 100%;
    color: #ec1818f3;
    color: #29f017;
    color: #4040e2;
  }
  .searchTop {
    display: flex;
    justify-content: space-between;
  }
  .search {
    margin: 12px 0;
    display: flex;
    padding: 10px 0 0 10px;
  }
  h4 {
    text-align: center;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    color: #4e72c8;
  }
  .chart_list {
    .colleft {
      .listbox {
        .listul {
          width: 100%;
          height: 600px;
          overflow-y: auto;
          margin-bottom: 10px;
        }
        ul > li {
          list-style: none;
          height: 38px;
          line-height: 38px;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          padding-left: 10px;

          text-overflow: ellipsis;
          cursor: pointer;
          &:hover {
            background-color: rgba(192, 183, 240, 0.6);
          }
        }
      }
    }
    .colright {
      .chartbox {
      }
    }
  }
  .cur {
    background: #4e72c8;
    color: #fff;
  }
}
</style>